<template>
  <div id="addMovieOrderPage">
    <el-row>
      <el-col :span="16">
        <div class="seat-example">
          <el-space wrap>
            <div
              class="selectable-example example"
              style="width: 30px; height: 26px"
            ></div>
            <p style="margin-right: 20px">可选座位</p>
            <div
              class="sold-example example"
              style="width: 30px; height: 26px"
            ></div>
            <p style="margin-right: 20px">已售座位</p>
            <div
              class="selected-example example"
              style="width: 30px; height: 26px"
            ></div>
            <p style="margin-right: 20px">已选座位</p>
          </el-space>
        </div>
        <div class="container">
          <div
            v-for="item in data.seats"
            :key="item.row && item.column"
            :class="
              item.status === 0
                ? 'selectable-example'
                : item.status === 1
                ? 'sold-example'
                : 'selected-example'
            "
            class="example"
            style="width: 30px; height: 26px"
            @click="selectSeat(item)"
          />
        </div>
      </el-col>
      <el-col :span="8">
        <p>电影：{{ data.movieVO?.movieName }}</p>
        <p>影院：{{ data.theaterVO?.theaterName }}</p>
        <p>影厅：{{ HALL_TYPE_MAP[data.hallType] }}</p>
        <p>场次：{{ dayjs(data.showTime).format("YYYY-MM-DD HH:mm") }}</p>
        <p>票价：{{ data.price }}</p>
        <p>
          选座：{{ selectedSeats.row }} 排 {{ selectedSeats.column }} 座
          (一次最多选一个座位)
        </p>
        <el-button type="primary" @click="submitOrder">确认选座</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  defineProps,
  reactive,
  ref,
  watchEffect,
  withDefaults,
} from "vue";

import API from "@/api";
import { getMovieVoByIdUsingGet } from "@/api/movieController";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { getMovieShowVoByIdUsingGet } from "@/api/movieShowController";
import { addMovieOrderUsingPost } from "@/api/movieOrderController";
import { useRouter } from "vue-router";
import { HALL_TYPE_MAP } from "../../constant/movie";

interface Props {
  id: number;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return 0;
  },
});

const data = ref<API.MovieShowVO>({});

/**
 * 加载数据
 */
const loadData = async () => {
  if (!props) {
    return;
  }
  const res = await getMovieShowVoByIdUsingGet({
    id: props.id as any,
  });
  if (res.data.code === 0) {
    data.value = res.data.data as any;
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

watchEffect(() => {
  loadData();
});

const selectedSeats = ref<API.SeatStatus>({});
const selectSeat = (seat: API.SeatStatus) => {
  if (seat.status === 0) {
    if (!selectedSeats.value.status || selectedSeats.value.status === 0) {
      console.log(seat);
      seat.status = 2;
      selectedSeats.value = seat;
    }
  } else if (seat.status === 2) {
    seat.status = 0;
    selectedSeats.value = {};
  }
};
const router = useRouter();
const submitOrder = async () => {
  if (!selectedSeats.value.status || selectedSeats.value.status === 0) {
    ElMessage({
      message: "请选择座位",
      type: "error",
    });
    return;
  }
  const res = await addMovieOrderUsingPost({
    seat: selectedSeats.value,
    movieShowId: props.id,
    orderStatus: 0,
    price: data.value.price,
  });
  if (res.data.code === 0) {
    ElMessage({
      message: "下单成功",
      type: "success",
    });
    router.push("/movie_order/detail/" + res.data.data);
  } else {
    ElMessage({
      message: "下单失败，" + res.data.message,
      type: "error",
    });
  }
};
</script>

<style scoped>
#addMovieOrderPage {
  .seat-example {
    margin: 30px 0 30px 118px;
  }

  .selectable-example {
    background-image: url();
  }

  .sold-example {
    background-image: url();
  }

  .selected-example {
    background-image: url();
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    max-width: 400px;
    margin: 30px 0 30px 118px;
  }

  .example {
    margin: 5px; /* 可选：添加一些间距 */
  }
}

#addMovieOrderPage .content-wrapper > p {
  margin-bottom: 24px;
}
</style>

<!--<div
            v-for="item in data.seats"
            :key="item.row && item.column"
            class="example"
            style="width: 30px; height: 26px"
            :class="item.status === 0 ? 'selectable-example' : 'sold-example'"
            @click="selectSeat(item)"
          ></div>-->
<!--<div
              v-if="item.status === 0"
              class="selectable-example example"
              style="width: 30px; height: 26px"
            />
            <div
              v-else-if="item.status === 1"
              class="sold-example example"
              style="width: 30px; height: 26px"
            />
            <div
              v-else-if="item.status === 2"
              class="selected-example example"
              style="width: 30px; height: 26px"
            />-->
